<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <!-- Basic Page Needs
  ================================================== -->
	<meta charset="utf-8">
	<title>天悦电影网</title>
	<meta name="description" content="edwarder.com">
	<meta name="author" content="www.edwarder.com">
	
    <!-- Mobile Specific Metas
  ================================================== -->
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    
    <!-- CSS
  ================================================== -->
  	<link rel="stylesheet" th:href="@{/front/css/zerogrid.css}">
	<link rel="stylesheet" th:href="@{/front/css/style.css}">
	<link rel="stylesheet" th:href="@{/front/css/responsive.css}">
</head>
	<body>
		<div class="wrap-body">

		<!--////////////////////////////////////Header-->
		<div th:replace="front/common/nav :: nav"></div>

		<!--////////////////////////////////////Container-->
		<section id="container">
			<div class="wrap-container zerogrid">
				<div id="main-content" class="col-2-3">
					<div class="wrap-content">
						<div class="movie">
							<div class="row type">
								<div class="title">
									<center><h2>MOVIE</h2></center>
								</div>
								<ul>
									<li>
										<select>
											<option value="audi" selected>Type</option>
										</select>
									</li>
									<li><a class="button " href="#">Search</a></li>
								</ul>
							</div>
							<div class="row">
								<div class="col-1-4" th:each="film:${page.records}">
									<div class="wrap-col">
										<div class="post">
											<div class="view effect">
											 <img class="thumb" th:src="@{'/public/film/' + ${film.filmPic}}" th:width="200px" th:height="271px"/>
											  <div class="mask">
												<a th:href="@{/f/film/details(id=${film.id})}" class="info" title="Full Image"><img th:src="@{/front/images/play_button_64.png}" /></a>
											  </div>

											</div>
											<div class="clear"></div>
											<a th:href="@{/f/film/details(id=${film.id})}"><h3 th:text="${film.filmName}">战狼2</h3></a>
											<span th:text="${film.filmName}">吴京</span>
										</div>
									</div>
								</div>
							</div>
							<center><div class="pagination">
								<a href="javascript:;" th:disabled="${page.current == 1 ? 'true' : 'false'}"
								   th:class="${page.current == 1 ? 'page active' : 'page gradient'}" th:href="@{/f/film/index(pageNo=1)}">首页</a>

								<a th:each="i : ${#numbers.sequence(1,page.pages)}" href="#"
								   th:class="${page.current == i ? 'page active' : 'page gradient'}"
								   th:text="${i}" th:href="@{/f/film/index(pageNo=${i})}" >1</a>

								<a href="javascript:;" th:disabled="${page.current == page.pages ? 'true' : false}"
								   th:class="${page.current == page.pages ? 'page active' : 'page gradient'}" th:href="@{/f/film/index(pageNo=${page.pages})}">尾页</a>
							</div></center>
						</div>
					</div>
				</div>
				<div id="sidebar" class="col-1-3">
					<div class="wrap-sidebar">
						<!---- Start Widget ---->
						<div class="widget wid-new-updates">
							<div class="wid-header">
								<h5>Hot Updates !</h5>
							</div>
							<div class="wid-content">
								<ul>
									<li th:each="film:${page.records}">
										<a href="#" th:text="${film.filmName}">Mad Max: Fury Road</a><span><img th:src="@{/front/images/hot.png}" /></span>
									</li>
								</ul>
							</div>
						</div>
						<div class="widget wid-post">
							<div class="wid-header">
								<h5>Today's movies</h5>
							</div>
							<div class="wid-content" th:each="film,itemStat:${page.records}" th:if="${itemStat.count}<=3">
								<div class="post">
									<a href="#"><img th:src="@{'/public/film/' + ${film.filmPic}}" th:width="200px" th:height="271px"/></a>
									<div class="wrapper">
									  <a href="#"><h6 th:text="${film.filmName}">A Blue Morning</h6></a>
									  <p>March 1, 2015</p>
									  <a href="#"><img th:src="@{/front/images/star.png}" /></a>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</section>

		<!--////////////////////////////////////Footer-->
		<div th:replace="front/common/footer :: footer"></div>
		</div>
		<!--<script th:src="@{/front/js/jquery.min.js}"></script>-->
		<!--<script th:src="@{/front/js/css3-mediaqueries.js}"></script>-->
	</body>
</html>